<template>
  <!-- <a-card title="增值服务"> -->
  <div class="p-8">
    <a-table class="table-con" row-key="id" :columns="columns" :data-source="data" :pagination="pagination">
      <template #serviceCode="val, data">
        <section class="text-center">
          <section class="text-14">{{ data.serviceCode }}</section>
        </section>
      </template>
      <template #serviceName="val, data">
        <a-tooltip>
          <template slot="title"> {{data.serviceDesc}} </template>
          {{data.serviceName}}
        </a-tooltip>
      </template>
      <template #isInclude="val, data">
        <div v-if="data.listInclude && data.listInclude.length > 0">
          <span>包含：</span>
          <span>{{ data.listInclude.slice(0, 2).join('、') }}</span>
          <a-tooltip v-if="data.listInclude.length > 2">
            <template slot="title">
              <span>{{ data.listInclude.join('、') }}</span>
            </template>
            <a class="pl-10">更多</a>
          </a-tooltip>
        </div>
        <div v-if="data.listExclude && data.listExclude.length > 0">
          <span>不包含：</span>
          <span>{{ data.listExclude.slice(0, 2).join('、') }}</span>
          <a-tooltip v-if="data.listExclude.length > 2">
            <template slot="title">
              <span>{{ data.listInclude.join('、') }}</span>
            </template>
            <a class="pl-10">更多</a>
          </a-tooltip>
        </div>
      </template>
      <template #isEnabled="isEnabled, data">
        <!-- <a-switch :disabled="true" :checked="isEnabled" /> -->
        <span :class="data.isEnabled ? 'FF18' : ''">{{ data.isEnabled ? '采用' : '未采用' }}</span>
      </template>
      <template #limitQuantity="val, data">
        {{ data.limitQuantity == '0' ? '不限量' : data.limitQuantity }}
      </template>
    </a-table>
  </div>
  <!-- </a-card> -->
</template>

<script>
import { tableMixins } from '@/utils/mixins'

export default {
  mixins: [tableMixins],
  components: {},
  props: {
    addedData: {
      type: Array,
    },
  },
  data() {
    return {
      pageNum: 1,
      rowsNum: 10,
      columns: [
        { title: '编号', dataIndex: 'serviceCode', align: 'center', scopedSlots: { customRender: 'serviceCode' } },
        { title: '服务名称', dataIndex: 'serviceName', align: 'center', scopedSlots: { customRender: 'serviceName' } },
        {
          title: '包含/不包含项目',
          dataIndex: 'isInclude',
          align: 'center',
          scopedSlots: { customRender: 'isInclude' },
        },
        { title: '每单限量', dataIndex: 'limitQuantity', scopedSlots: { customRender: 'limitQuantity' } },
        { title: '是否启用', scopedSlots: { customRender: 'isEnabled' } },
      ],
      data: [],
    }
  },
  computed: {},
  watch: {
    addedData() {
      this.data = this.addedData
    },
  },
  created() {
    this.getList()
  },
  mounted() {},
  destroyed() {},
  methods: {
    getList() {
      this.data = this.addedData
    },
  },
}
</script>
<style scoped lang='less'>
.FF18 {
  color: #1890ff;
}
</style>
